<script setup>
import { ref } from "vue"
import login from "@/apis/login.js"
import { userStore } from '@/stores/user'
import { useRouter } from 'vue-router'


const router = useRouter()
const user_store = userStore()
const username = ref("")
const password = ref("")

const login_submit = () => {

    const params = {
        username: username.value,
        password: password.value
    }

    if (params.username == "" || (params.password == "" || params.password.length < 5)) {
        alert("请填写用户名和密码(密码必须大于等于5位)")
        return
    }

    login(params).then(res => {
        console.log(res)
        if (res.code == 0) {
            user_store.saveToLocalStorage(params.username, res.data)
            router.push("/")
        } else {
            alert(res.msg)
        }
    }).catch(err => {
        console.log(err)
        alert("登录失败")
    })
}

</script>

<template>
    <div class="container">
        <div class="login">
            <form @submit.prevent="login_submit">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" id="username" name="username" v-model="username" placeholder="用户名">
                </div>
                <br>
                <div class="form-group">
                    <label for="password">密&nbsp&nbsp&nbsp&nbsp码： </label>
                    <input type="password" id="password" name="password" v-model="password" placeholder="密码">
                </div>
                <br>
                <button type="submit">登&nbsp录</button>
            </form>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-image: url("@/assets/img/a.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 320px;
}

form {
    padding: auto;
}

.form-group,
button {
    display: block;
    padding: 0.5rem;
    font-size: 1rem;
    margin: auto;
}

input {
    width: 70%;
    height: 3dvh;
}
</style>